import {Component} from 'react'
import './index.css'
export default class Footer extends Component{
    constructor(props){
        super(props)
    }
    get todoLength(){
        return this.props.todoList.length;
    } 
    get todoChecked(){
        let number = 0;
        this.props.todoList.forEach(item=>{
            if(item.check){
                number++;
            }
        })
        return number;
    }
    get isAll(){
        let flag = true;
        this.props.todoList.forEach(item=>{
          if(!item.check){
            flag = false;
          }
        })
        return flag;
      }
    todoCheckAll = (e)=>{
        this.props.todoCheckAll(e.target.checked)
    }
    todoClear = ()=>{
        this.props.todoClear()
    }
    render(){
        return (
            <div className="todo-footer">
                <div>
                    <input type="checkbox" onChange={this.todoCheckAll} checked={this.isAll}/>
                    已完成{this.todoChecked} / 全部{this.todoLength}
                </div>
                <button className="btn btn-danger" onClick={this.todoClear}>清除已完成任务</button>
            </div>
        )
    }
}